<template>
  <div id="content">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goods_manager' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div class="head">
      <el-button class="add-btn" @click="addGoodsInbounch">新增商品入库</el-button>
      <el-select class="input" v-model="status" @change="getStatusList">
        <el-option label="全部" value="0"></el-option>
        <el-option label="待审核" value="1"></el-option>
        <el-option label="已驳回" value="2"></el-option>
        <el-option label="已通过" value="3"></el-option>
      </el-select>
      <el-button class="search-btn" type="success">查询更多</el-button>
    </div>
    <GoodsInbounchList
      :goodsList="inboundOrders"
      @delGoodsInfo="delGoodsInfo"
      @modifyData="modifyData"
      :status="status"
    />
    <PageComponents
      v-if="total"
      :total="total"
      :curPage="page"
      @changeLimit="changeLimit"
      @changePage="changePage"
    />
    <el-dialog title="新增入库" id="myDialog" :visible.sync="dialogIsVisible" v-show="dialogIsVisible">
      <AddGoodsInbounch :formLabelWidth="formLabelWidth" :curPage="page" :total="total" />
      <div slot="footer" class="dialog-footer">
        <el-button style="marginright: 30px" @click="dialogIsVisible = false">取 消</el-button>
        <el-button type="primary" @click="getInputValue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddGoodsInbounch from "@/components/inbounchComponents/AddGoodsInbounch.vue";
import GoodsInbounchList from "@/components/inbounchComponents/GoodsInbounchList.vue";
import PageComponents from "@/components/PageComponents.vue";
import { getAllGoodsList } from "@/http/goodsInbounchApi.js";
export default {
  name: "GoodsInbounch",
  components: {
    GoodsInbounchList,
    PageComponents,
    AddGoodsInbounch
  },
  data() {
    return {
      status: "0",
      page: 1,
      limit: 10,
      total: 10,
      inboundOrders: [
        {
          status: 0, // 状态（0：已驳回；1：已通过；2：待审核）
          documentNum: 12312321, // 单据编号
          createDate: 20220606, // 创单时间
          category: "素金类", // 商品类型
          vendor: "俄罗斯", // 供应商
          inboundStore: "成都总店", // 入库门店
          inboundcounter: "中国黄金", // 入库柜台
          orderNumber: "121321", // 订单号
          count: 6, // 数量
          totalWeight: 20, // 总重量
          totalPrice: 88888, // 总成本
          series: 2, // 系列
          LabelTotalPrice: 999999, // 标签总价
          source: "印度", // 来源
          createPerson: "zezeze", // 创单人
          approver: "zezeze", // 审批人
          approvalDate: 20220606 // 审批日期
        }
      ],
      dialogIsVisible: false,
      formLabelWidth: "100px"
    };
  },
  watch: {
    dialogIsVisible: function() {
      if (this.dialogIsVisible == false) {
        this.$bus.$emit("postInfo");
      }
    }
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      getAllGoodsList({
        page: this.page,
        limit: this.limit,
        status: this.status
      })
        .then(res => {
          this.total = Number(res.data[0].total);
          this.inboundOrders = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    changeLimit(value) {
      this.limit = value;
      this.getData();
    },
    changePage(value) {
      this.page = value;
      this.getData();
    },
    getStatusList() {
      this.getData();
    },

    addGoodsInbounch() {
      this.dialogIsVisible = true;
    },
    getInputValue() {
      this.dialogIsVisible = false;
    },
    modifyData(data) {
      Object.assign(this.inboundOrders, data);
    },
    delGoodsInfo(id) {
      this.inboundOrders.forEach((item, index) => {
        if (item.id == id) {
          this.inboundOrders.splice(index, 1);
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/var.scss";
#content {
  width: 100%;
  height: 100%;
  background: #fff;
  .head {
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    .add-btn {
      margin-right: 20px;
      border-radius: 8px;
      background: $theme-color;
      color: #fff;
    }
    .input {
      border-radius: 8px;
      background: $theme-color;
      color: #fff;
    }
    .search-btn {
      margin-left: 20px;
      border-radius: 8px;
      color: #fff;
    }
  }
  #myDialog {
    .el-dialog {
      margin-top: 60px !important;
      width: 80%;
      height: 840px;
    }
    .title {
      width: 230px;
      display: inline-block;
      margin-right: 10px;
    }
    .el-dialog__footer {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
}
</style>